<template>
  <section class="power-wrapper">
      <div class="area-box" v-for="(area,index) in list" :key="index">
          <div class="po-left">
              <div class="poicons"><svg-icon iconClass="electricty" :class='"poicon po-icon"+index'></svg-icon>
              </div>
              <div class="icon-title">{{area.title}}</div>
          </div>
          <div class="po-right">
            <div :class="'text-num po-icon'+index">{{area.time}}</div>
            <div> 小时</div>
          </div>
      </div>

  </section>
</template>

<script>
export default {
  name:"poectricity",
  components: {
  },
  props: ["id", "list"],
  created() {
  },
  watch: {
    list: {
      handler(newVal) {
        if (newVal) {
          this.initData();
        }
      },
      immediate: true,
      deep: true,
    },
  },
  
  methods: {
    initData() {
      console.log(this.list,"poectricity");
    },
  },
};
</script>

<style lang="scss">
$fontColor1: #20debc;
$fontColor2: #deb820;
$fontColor3: #2BBAF9;
.power-wrapper {
  width: calc(100% - 120px);
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  margin: 0 60px;

  .area-box{
      width: 50%;
      // margin-left: 20px;
      margin-top: 20px;
      display: flex;
      
      .po-left {
        width: 50px;
      }
      .poicons {
        background: url("../../assets/images/circleBG.png") no-repeat;
        background-size: 100% 100%;
        width: 40px;
        height: 40px;
        margin: 7px;
        text-align: center;

        .poicon{
          font-size: 20px;
          height: 40px;
        }
      }
      
      .icon-title {
        width: 45px;
        text-align: center;
      }
      .po-right {
        text-align: left;
        padding: 10px;
        
        .text-num {
          font-size: 18px;
          margin-bottom: 10px;
        }
      }
      .po-icon0{
        color: $fontColor1;
      }
      .po-icon1{
        color: $fontColor2;
      }
      .po-icon2,.po-icon3{
        color: $fontColor3;
      }
        
      
  }
}
</style>